<template>
    <button :class="cns" :title="title">
        <icon class="ph-icon-left" :icon="icon" v-if="icon"/>
        <span v-empty><slot></slot></span>
        <icon class="ph-icon-right" :rightFixed="iconRightFixed" :icon="iconRight" v-if="iconRight"/>
    </button>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType } from 'vue'
import {ColorType} from '../../shared/config'
export default defineComponent({
    directives:{
        empty:{
            mounted(el:HTMLElement){
                setTimeout(()=>{
                    el.className=el.innerText?'':"ph-empty"
                })
            },
            updated(el:HTMLElement){
                setTimeout(()=>{
                    el.className=el.innerText?'':"ph-empty"
                })
            }
        }
    },
    components:{
        Icon:defineAsyncComponent(()=>import('./icon.vue'))
    },
    props:{
        type:{
            type:String as PropType<ColorType>,
            default:ColorType.light
        },
        title:{type:String},
        align:{type:String},
        naked:{type:Boolean,default:false},
        mini:{type:Boolean,default:false},
        radius:{type:Boolean,default:false},
        active:{type:Boolean,default:false},
        block:{type:Boolean,default:false},
        icon:{type:String},
        iconRight:{type:String},
        iconRightFixed:Boolean,
        shape:String,
    },
    setup(props) {

        const cns = computed(()=>{
            const cns = ['ph-action']
            if(props.naked)
                cns.push('ph-action-naked')
            else if(props.type)
                cns.push("ph-action-"+props.type)
            if(props.align)
                cns.push("ph-action-"+props.align)
            if(props.mini)
                cns.push('ph-action-mini')
            if(props.radius)
                cns.push('ph-action-radius')
            if(props.active)
                cns.push('ph-action-active')
            if(props.block)
                cns.push('ph-action-block')
            if(props.shape)
                cns.push('ph-action-'+props.shape)
            return cns
        })
        return {cns}
    },
})
</script>

<style lang="scss">
@import '../../assets/scss/predef.scss';
@import '../../assets/scss/icon.scss';
.ph-action{
    --ph-action-bg:transparent;
    --ph-action-bg-hover:transparent;
    --ph-action-bg-active:transparent;
    --ph-action-bg-disabled:transparent;
    --ph-action-color:inherit;
    --ph-action-color-hover:inherit;
    --ph-action-color-active:inherit;
    --ph-action-color-disabled:inherit;
    --ph-action-alpha:1;
    --ph-action-alpha-active:1;
    --ph-action-alpha-hover:1;
    --ph-action-alpha-disabled:1;
    position: relative;

    @include button();
    
    &-left{
        text-align: left;
    }
    &-right{
        text-align: right;
    }
    &-block{
        display: block;
        width: 100%;
    }
    &-primary,
    &-success,
    &-info,
    &-danger,
    &-warning{
        --ph-action-color: var(--ph-c-light);
        --ph-action-color-hover: var(--ph-c-light);
        --ph-action-color-active: var(--ph-c-light);
        --ph-action-color-disabled: var(--ph-c-light);
    }

    &-primary,
    &-success,
    &-info,
    &-danger,
    &-warning,
    &-golden,
    &-dark{
        --ph-action-alpha: 1;
        --ph-action-alpha-hover: .85;
        --ph-action-alpha-action: 1;
        --ph-action-alpha-disabled: .5;
    }
    &-primary{
        --ph-action-bg:var(--ph-primary);
        --ph-action-bg-hover:var(--ph-primary);
        --ph-action-bg-active:var(--ph-primary);
        --ph-action-bg-disabled:var(--ph-primary);
    }
    &-success{
        --ph-action-bg:var(--ph-success);
        --ph-action-bg-hover:var(--ph-success);
        --ph-action-bg-active:var(--ph-success);
        --ph-action-bg-disabled:var(--ph-success);
    }
    &-info{
        --ph-action-bg:var(--ph-info);
        --ph-action-bg-hover:var(--ph-info);
        --ph-action-bg-active:var(--ph-info);
        --ph-action-bg-disabled:var(--ph-info);
    }
    &-danger{
        --ph-action-bg:var(--ph-danger);
        --ph-action-bg-hover:var(--ph-danger);
        --ph-action-bg-active:var(--ph-danger);
        --ph-action-bg-disabled:var(--ph-danger);
    }
    &-warning{
        --ph-action-bg:var(--ph-warning);
        --ph-action-bg-hover:var(--ph-warning);
        --ph-action-bg-active:var(--ph-warning);
        --ph-action-bg-disabled:var(--ph-warning);
    }
	&-golden{
        --ph-action-bg:var(--ph-golden);
        --ph-action-bg-hover:var(--ph-golden);
        --ph-action-bg-active:var(--ph-golden);
        --ph-action-bg-disabled:var(--ph-golden);
        --ph-action-color: var(--ph-golden-color);
        --ph-action-color-hover: var(--ph-golden-color);
        --ph-action-color-active: var(--ph-golden-color);
        --ph-action-color-disabled: var(--ph-golden-color);
    }
    &-transparent{
        --ph-action-bg:transparent;
        --ph-action-color: inherit;
        --ph-action-bg-active:var(--ph-theme);
        --ph-action-color-active: var(--ph-c-light);
        --ph-action-alpha-disabled:.5;
    }
    &-dark{
        --ph-action-bg:var(--ph-dark);
        --ph-action-bg-hover:var(--ph-dark);
        --ph-action-bg-active:var(--ph-dark);
        --ph-action-bg-disabled:var(--ph-dark);
        --ph-action-color: var(--ph-c-light);
        --ph-action-color-hover: var(--ph-c-light);
        --ph-action-color-active: var(--ph-c-light);
        --ph-action-color-disabled: var(--ph-c-light);
        border-color: var(--ph-dark-d1);
    }
    &-light{
        --ph-action-bg:var(--ph-light);
        --ph-action-color:var(--ph-c);

        --ph-action-bg-hover:var(--ph-light-d1);
        --ph-action-color-hover:var(--ph-c-d1);

        --ph-action-bg-active:var(--ph-theme);
        --ph-action-color-active:var(--ph-c-light);
        --ph-action-alpha-active:1;

        --ph-action-bg-disabled:var(--ph-light);
        --ph-action-color-disabled:var(--ph-c);
        --ph-action-alpha-disabled:.7;

        border-color: var(--ph-bd-light);
    }
    &-radius{
        border-radius: 4px;
    }
    &-naked{
        --ph-action-color:inherit;
        --ph-action-bg:transparent;
        --ph-action-color-hover:var(--ph-theme);

        --ph-action-bg-disabled:var(--ph-bg-disabled);
        --ph-action-color-disabled:inherit;
        --ph-action-alpha-disabled:.5;
        padding: 0 calc(var(--phx) * 0.5714);
        line-height: initial;
    }
    &-mini{
        padding: 0 calc(var(--phx) * 0.5714)!important;
        font-size:var(--ph-fs-small);
        line-height: 1.8;
    }
    &-primary,
    &-success,
    &-info,
    &-danger,
    &-warning,
    &-light,
    &-dark,
    &-golden,
    &-transparent{
        padding: var(--ph-action-padding);
    }

    &:hover{
        @include bg(var(--ph-action-bg-hover));
        color:var(--ph-action-color-hover);
        opacity: var(--ph-action-alpha-hover);
    }
    &-active,
    &-active:hover{
        z-index: 1;
        @include bg(var(--ph-action-bg-active));
        color:var(--ph-action-color-active);
        opacity: var(--ph-action-alpha-active);
    }
    &:disabled{
        cursor: not-allowed!important;
        @include bg(var(--ph-action-bg-disabled)!important);
        color:var(--ph-action-color-disabled)!important;
        opacity: var(--ph-action-alpha-disabled)!important;
    }
    &-light:hover{
        border-color: var(--ph-bd-light);
    }
    &-light:disabled{
        border-color: var(--ph-bd-light)!important;
    }
    &-dark:hover{
        border-color: var(--ph-dark-d1);
    }
    &-dark:disabled{
        border-color: var(--ph-dark-d1);
    }
    &-square{
        padding: calc(var(--phx) * 0.5714);
        border-radius: 4px;
        flex: 0 0 auto;
        position: relative;
    }
    
    .ph-icon + span:not(.ph-empty){
        margin-left:5px;
    }
    .ph-empty{
        display: none
    }
    @include bg(var(--ph-action-bg));
    color:var(--ph-action-color);
    opacity: var(--ph-action-alpha);
    font-size:var(--phx);
}

.ph-input-raddon{
	flex: 0 0 auto;
	padding: var(--ph-form-padding);
	border-radius: var(--ph-form-radius);

	margin-left: -1px;
    border-color: var(--ph-form-border);
	border-radius: 0 var(--ph-form-radius) var(--ph-form-radius) 0;
	background-color: #fff;
    line-height: inherit;
    width: calc(var(--phx)*2.9285);
}
</style>